/**
 * 添加
 */
layui.use(['form', 'admin', 'element', 'HttpRequest', 'gunsRadio', 'xmSelect', 'upload', 'layer'], function () {
    var form = layui.form;
    var admin = layui.admin;
    var HttpRequest = layui.HttpRequest;
	var laydate = layui.laydate;
	var $ = layui.jquery;
    var gunsRadio = layui.gunsRadio;
 	var organizationXmSel;
	var upload = layui.upload;
	var layer = layui.layer
	var element = layui.element;

/*    gunsRadio.render({
        url: Feng.ctxPath + '/dict/list',
        elem: '#workDept',
        fields: {name: 'dictName', value: 'dictCode'},
        where: {dictTypeCode: ''},
		type: 'workDept'
    });*/
    // 初始化组织树
    new HttpRequest(Feng.ctxPath + "/hrOrganization/tree", 'get', function (data) {
        organizationXmSel = xmSelect.render({
            el: '#workDept',
            data: data.data,
            model: {label: {type: 'text'}},
            radio: true,
            layVerify: 'required',
            clickClose: true,
            tree: {
                show: true,
                indent: 15,
                strict: false,
                expandedKeys: true
            }
        });
    }).start();

	//上传缩略图
	var uploadgImg = upload.render({
	      elem: '#uploadImg' //绑定元素
	    , url: Feng.ctxPath + '/sysFileInfo/upload?secretFlag=N' //上传接口
		, accept: 'images'
		//, size: '200'
		, number: 1
		,progress: function(n, elem, res, index) {
			var percent = n + '%';
			$('#uploadImgProgress').remove();

			// 先创建进度条HTML
			var progressHtml = `
                <div id="uploadImgProgress" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="upload" style="margin: 10px;width: 40%">
                    <div class="layui-progress-bar" lay-percent="${percent}">
                        <span class="layui-progress-text">${percent}</span>
                    </div>
                </div>
            `;
			$('#uploadImg').after(progressHtml);

			// 设置颜色类并渲染
			var progressBar = $('.layui-progress-bar');
			if (n < 30) {
				progressBar.addClass('layui-bg-red');
			} else if (n < 70) {
				progressBar.addClass('layui-bg-orange');
			} else {
				progressBar.addClass('layui-bg-green');
			}

			// 重新渲染进度条
			element.render('progress');
			element.progress('upload', percent);
		}
        , done: function (res) {
			console.log(res)
            //上传完毕回调
			$("#viewimg").remove()
			$("#uploadImg").after(`<img id='viewimg' src=${res.data.fileUrl} tb-img style="max-height:38px;max-width:50px;margin-left: 15px" class="tb-img-circle" >`)
			$("#viewimg").on('click', function(src) {
				console.log(src)
				var src = $(this).attr('src')
			    layer.photos({
		            photos: {
		                "title": "预览", //相册标题
		                "id": 123, //相册id
		                "start": 0, //初始显示的图片序号，默认0
		                "data": [   //相册包含的图片，数组格式
		                    {
		                        "alt": "图片名",
		                        "pid": 666, //图片id
		                        "src": src, //原图地址
		                        "thumb": "" //缩略图地址
		                    }
		                ]
		            }
		            ,anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
					,shade: .1
					, closeBtn: true

		        })
			});
			//$("#uploadImg").attr("class","class=layui-btn layui-btn-disabled")
			$("#workImg").val(res.data.fileId)
			$('#uploadImgProgress').remove();
            Feng.success("上传成功!");
        }
        , error: function (err) {
			$('#uploadImgProgress').remove();
            //请求异常回调
            Feng.error("上传失败！" + err.message);
        }
    });
	//上传视频
	var uploadVideo = upload.render({
	      elem: '#uploadVideo' //绑定元素
	    , url: Feng.ctxPath + '/works/upload?secretFlag=N' //上传接口
		, accept: 'video'
		, number: 1,
		progress: function(n, elem, res, index) {
			var percent = n + '%';
			$('#uploadProgress').remove();

			// 先创建进度条HTML
			var progressHtml = `
                <div id="uploadProgress" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadProgress" style="margin: 10px;width: 40%">
                    <div class="layui-progress-bar" lay-percent="${percent}">
                        <span class="layui-progress-text">${percent}</span>
                    </div>
                </div>
            `;
			$('#uploadVideo').after(progressHtml);

			// 设置颜色类并渲染
			var progressBar = $('.layui-progress-bar');
			if (n < 30) {
				progressBar.addClass('layui-bg-red');
			} else if (n < 70) {
				progressBar.addClass('layui-bg-orange');
			} else {
				progressBar.addClass('layui-bg-green');
			}

			// 重新渲染进度条
			element.render('progress');
			element.progress('uploadProgress', percent);
		}
		, done: function (res) {
			console.log(res)
            //上传完毕回调
			$("#viewVideo").remove()
			$("#uploadVideo").after(`<button id="viewVideo" src="${res.data.fileUrl}"  type="button" class="layui-btn" >预览视频</button>`)
			$("#viewVideo").on('click', function() {
				var src = $(this).attr('src')
				//var videoHtml = `<video style="max-width: 100%; max-height: 100%; display: block; margin: 0 auto" controls="controls" src="${src}"></video>`
				var videoHtml = `<live-player id='play' 
				video-url="${src}" 
				live="false" aspect="fullscreen"></live-player>`
				layer.open({
	               type: 1
	               ,offset: 'auto'
	               ,area: ['80%', '80%']
	               ,shadeClose: true//点击外围关闭弹窗
	               ,scrollbar: true//不现实滚动条
	               ,title: false //不显示标题
				   ,shade: .1
				   , closeBtn: true
	               ,content: videoHtml //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
	               ,cancel: function () {
	                   
	               }
	           });
			});
			$("#workUrl").val(res.data.fileId)
			$('#uploadProgress').remove();
            Feng.success("上传成功!");
        }
        , error: function (err) {
			$('#uploadProgress').remove();
            //请求异常回调
            Feng.error("上传失败！" + err.message);
        }
    });
	
    //表单提交事件
    form.on('submit(btnSubmit)', function (data) {
		//获取部门
		data.field.workDept = organizationXmSel.getValue('valueStr');
		console.log(data)
        var request = new HttpRequest(Feng.ctxPath + "/works/add", 'post', function (data) {
            admin.closeThisDialog();
            Feng.success("添加成功！");
            admin.putTempData('formOk', true);
        }, function (data) {
            admin.closeThisDialog();
            Feng.error("添加失败！" + data.message);
        });
        request.set(data.field);
        request.start(true);
    });

});